<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../bootstrap-icons-1.13.1/bootstrap-icons.min.css">
</head>
<body>
    <!--
        有序列表  标识项： 实心圆，空心圆，空心方块等
        无序列表  标识项  阿拉伯数字， 小写英文字符，大写英文字符， 大小写罗马数字
        我们更多的是需要取消 标识项 list_unstyled
    -->
    <h1>去除标识项</h1>
    <ul class="list-unstyled">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ul>

   <ol class="list-unstyled">
        <li>HTML</li>
        <li>CSS</li>
        <li>JS</li>
    </ol>

    <hr>
    <!--
        如果需要使用无序列表或者有序列表创建水平菜单，需要将所有的列表项放在同一行，
        ul/ol  需要添加 list-inline
        li     需要添加 list-inline-item
    -->
    <h1>水平菜单</h1>
    <ul class="list-inline">
        <li class="list-inline-item">
            <a href="#" class="text-danger">淘宝首页</a> |
        </li>
        <li class="list-inline-item">
            <a href="#" class="text-success">天猫超市</a> |
        </li>
        <li class="list-inline-item">
            <a href="#" class="text-info"><i class="bi bi-globe"></i>天猫国际</a> |
        </li>
        <li class="list-inline-item">
            <a href="#" class="text-danger">聚划算</a> |
        </li>
        <li class="list-inline-item">
            <a href="#" class="text-danger"><i class="bi bi-bar-chart-line-fill"></i>直播频道</a> |
        </li>
        <li class="list-inline-item">
            <a href="#" class="text-muted">88VIP</a>
        </li>
    </ul>
    

</body>
</html>